<template>
    <div class="quick-actions-panel">
        <div v-for="func in commonFunctions" :key="func.label" class="quick-actions-item"
            @click="handleFunctionClick(func)" :title="`${func.label} (${func.keyCode})`">
            <i :class="func.icon" class="quick-actions-icon"></i>
            <div class="quick-actions-content">
                <span class="quick-actions-name" :title="getActionDescription(func.label)">{{ func.label }}</span>
            </div>
            <div v-if="func.shortcuts.length > 0" class="quick-actions-shortcut">
                <div class="quick-actions-shortcut_item" v-for="shortcut in func.shortcuts">{{ shortcut }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { QuickActionsItems } from '@/constants/layout'
import { ROUTE_NAMES } from '@/constants/routes.js'
import { eventBus } from '@/service/eventService'
import { useRouter } from 'vue-router'
const router = useRouter()

const emit = defineEmits([ 'close'])

// 常用功能列表数据
const commonFunctions = ref(QuickActionsItems)

// 获取操作描述
const getActionDescription = (label) => {
    const descriptions = {
        '刷新': '刷新当前页面',
        '关闭': '关闭当前标签页',
        '全屏': '切换全屏模式',
        '功能最大化': '最大化当前功能窗口'
    }
    return descriptions[label] || ''
}

// 获取操作类型
const getActionType = (label) => {
    const actions = {
        '刷新': 'refresh',
        '关闭': 'close',
        '全屏': 'fullscreen',
        '功能最大化': 'maximize'
    }
    return actions[label] || ''
}

// 处理功能点击
const handleFunctionClick = (func) => {
    const actionType = getActionType(func.label)

    // 执行对应的操作
    switch (actionType) {
        case 'refresh':
            eventBus._emit('refreshPageEvent')
            break
        case 'close':
            router.push({ name: ROUTE_NAMES.PC_BLANK })
            break
        case 'fullscreen':
            toggleFullscreen()
            break
        case 'maximize':
            toggleMaximize()
            break
    }

    emit('close')
}

// 全屏切换
const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
            console.log('无法进入全屏模式:', err)
        })
    } else {
        document.exitFullscreen().catch(err => {
            console.log('无法退出全屏模式:', err)
        })
    }
}

// 功能最大化切换
const toggleMaximize = () => {
    const funcArea = document.querySelector('.main-content') || document.querySelector('.content')
    if (funcArea) {
        funcArea.classList.toggle('maximized')
    }
}

// 快捷键处理
const handleKeydown = (event) => {
    const { altKey, ctrlKey, key } = event

    // 检查快捷键组合
    commonFunctions.value.forEach(func => {
        const keyCode = func.keyCode.toLowerCase()
        const currentKey = key.toLowerCase()

        // Alt+F5 - 刷新
        if (altKey && currentKey === 'f5' && keyCode.includes('alt+f5')) {
            event.preventDefault()
            handleFunctionClick(func)
        }
        // Alt+C - 关闭
        else if (altKey && currentKey === 'c' && keyCode.includes('alt+67')) {
            event.preventDefault()
            handleFunctionClick(func)
        }
        // F11 - 全屏
        else if (currentKey === 'f11' && keyCode.includes('f11')) {
            event.preventDefault()
            handleFunctionClick(func)
        }
        // Ctrl+F1 - 功能最大化
        else if (ctrlKey && currentKey === 'f1' && keyCode.includes('ctrl+f1')) {
            event.preventDefault()
            handleFunctionClick(func)
        }
    })
}

// 组件挂载时添加键盘事件监听
onMounted(() => {
    document.addEventListener('keydown', handleKeydown)
})

// 组件卸载时移除键盘事件监听
onBeforeUnmount(() => {
    document.removeEventListener('keydown', handleKeydown)
})

// 暴露方法供父组件调用
defineExpose({
    commonFunctions
})
</script>

<style lang="scss">
.header-common-popover {
    z-index: 1000 !important;
}
</style>

<style scoped lang="scss">
.quick-actions-panel {
    min-width: 280px;
    max-width: 320px;
}

.quick-actions-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.quick-actions-item {
    display: flex;
    height: 20px;
    justify-content: space-between;
    padding: 7px 16px;
    align-items: center;
    box-sizing: content-box;
    cursor: pointer;

    &:hover {
        background-color: #f0f2f5;
    }
}

.quick-actions-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.quick-actions-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.quick-actions-name {
    color: rgba(0, 0, 0, .9);
    font-size: 14px;
}


.quick-actions-shortcut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.quick-actions-shortcut_item {
    display: flex;
    justify-content: center;
    border-radius: 4px;
    padding: 2px 6px;
    border: 1px solid #d9d9d9;
    font-size: 10px;
    color: rgba(0, 0, 0, .9);
    min-width: 16px;
    background: #e0e3e6;
    box-sizing: content-box;
}
</style>